<template>
  <div class="zc">
    <nav-header :user="user_name"></nav-header>
    <div class="zcNav">
      <div class="left">
        <left-menu></left-menu>
      </div>
      <div class="right">
        <div class="nav_top">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-menu-item index="1">本次执行</el-menu-item>
            <el-menu-item index="2">执行历史</el-menu-item>
          </el-menu>
        </div>

      
        <!-- <div class="tt">
          进度条
          <el-progress
            type="line"
            :text-inside="true"
            :stroke-width="10"
            :percentage="40"
             status="success"
          ></el-progress>
        </div> -->
        <div class="top1">
          <template>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="plan_name" label="计划名称" width="300"></el-table-column>
              <el-table-column prop="person" label="创建人" width="300"></el-table-column>
              <el-table-column prop="case_total" label="用例总条数">
                <template slot-scope="scope">
                  <div v-if="!scope.row.case_total">
                    <i class="el-icon-loading"></i>
                  </div>
                  <div v-else>{{scope.row.case_total}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="执行状态">
                <template slot-scope="scope">
                  <div v-if="scope.row.execute">
                    <i class="el-icon-check"></i>
                  </div>
                  <div v-else>
                    <i class="el-icon-loading"></i>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="fail" label="失败">
                <template slot-scope="scope">
                  <div v-if="!scope.row.fail">
                    <i class="el-icon-loading"></i>
                  </div>
                  <div v-else>{{scope.row.fail}}</div>
                </template>
              </el-table-column>

              <el-table-column fixed="right" width="100px" label="操作">
                <template slot-scope="scope">
                  <div v-if="scope.row.fail>0">
                    <el-button
                      type="primary"
                      :loading="false"
                      :disabled="false"
                      size="mini"
                      @click="detail(scope.$index,scope.$row);"
                    >详情</el-button>
                  </div>
                  <div v-else>
                    <el-button type="primary" :loading="false" :disabled="true" size="mini">详情</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </div>
      </div>
    </div>
    <el-dialog title="失败详情" :center="true"  :visible.sync="detail_dialog">
      <el-table :border="true" :data="gridData">
        <el-table-column align="center" property="project" label="项目名称" width="200"></el-table-column>
        <el-table-column align="center" property="module" label="模块名称" width="200"></el-table-column>
        <el-table-column align="center" property="reason" label="失败原因" min-width="200"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import NavHeader from "@/components/NavHeader";
import leftMenu from "@/components/leftMenu";
import { api } from "./api/index";
import { exportExcel } from "@/api/download";

export default {
  data() {
    return {
      detail_dialog: false,
      detail_lis: null,
      receive: "",
      execute: false,
      loadstatues: true, // 加载  图片转圈
      disable: false, // 详情按钮是否可点击
      created_receive: [],
      activeIndex: "1",
      activeIndex2: "1",
      tableData: [],
      user_name: "",
      count: 1000,
      loading: false,
      gridData: []
    };
  },
  components: {
    NavHeader,
    leftMenu,
  },
  computed: {
    noMore() {
      return this.count >= 20;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  methods: {
    // 详情按钮
    detail(index, row) {
      this.detail_dialog = true
      const detail_table = [];

      console.log(this.detail_lis);
      console.log("detail");
      if (this.detail_lis) {
        this.detail_lis.forEach((item) => {
          if (item.failure_count > 0) {
            const dic = {
              project: item.project,
              module: item.module,
              reason: item.result[0],
            };
            detail_table.push(dic);
          }
        });
      }

      this.gridData = detail_table
      console.log(detail_table);
      console.log("=-=-=-=-");
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    test() {
      const lis = [...new Array(1000).keys()];
      const table_lis = [];
      lis.forEach((i) => {
        const dic = {};
        dic.name = i;
        table_lis.splice(0, 0, dic);
        let tem_lis = table_lis.slice(0, 10);
        console.log(tem_lis);
        this.tableData = tem_lis;
      });
    },
    load() {
      this.loading = true;
      setTimeout(() => {
        this.count += 1;
        this.loading = false;
      }, 2);
    },
    form_mounted() {
      const new_lis = [];
      this.receive.forEach((item, index) => {
        item.execute = false;
        const res = req(item, index).then((rr) => {
          console.log(rr);
          const response = rr.data[0];
          if (response.status == 10000) {
            item.execute = true;
            item.case_total = response.case_total_num;
            item.fail = String(response.plan_failure_count);    
            new_lis.push(item);
            this.tableData = new_lis;
            this.detail_lis = response.data;
          }
        });
      });

      // 请求方法
      async function req(dic, index) {
        
        console.log(dic); 
        console.log(index);
        console.log("---------------");
        return new Promise((reslove, reject) => {
          api({
            url: "/interface/project-list",
            method: "POST",
            data: dic,
          })
            .then((da) => {
              setTimeout(() => {
                reslove(da);
              });
            })
            .catch((err) => {
              reject(err);
            });
        });
      }
    },
  },

  created() {
    // 初始化方法 接收数据
    const receive = JSON.parse(this.$route.params.da);
    this.receive = receive;

    this.created_receive = receive; //创建数据赋值
  },

  mounted() {
    this.created_receive.forEach((item) => {
      item.case_total = "";
      item.status = "执行中。。。";
    });
    this.tableData = this.created_receive;

    this.form_mounted();
  },
};
</script>



<style lang='scss'>
.zc {
  width: auto;
  height: 100%;
}

.zcNav {
  height: calc(100% - 60px);
  display: flex;
  justify-content: flex-start;
  .right {
    width: 100%;
    .tt {
      width: 100%;
    }
  }
  .nav_top {
    height: 60px;
    background: #545c64;
    display: flex;
    justify-content: flex-start;
  }
}
</style>    



